import React, { useMemo, useState } from 'react';
import { Input } from 'antd';
import { SettingOutlined } from '@ant-design/icons';

import { INodeComponent } from './type';
import { NodeArrayTable } from './NodeArrayTable';

export const NodeArrayObject: React.FC<INodeComponent> = (props) => {
  const [visible, setVisible] = useState<boolean>(false);

  const data = useMemo(() => {
    return props?.data;
  }, [props?.data]);

  const onFormChange = (value: any) => {
    if (value && props?.onChange) {
      props.onChange(value);
    }
  };

  const onOpen = () => {
    setVisible(true);
  };

  const onClose = () => {
    setVisible(false);
  };

  return (
    <>
      <Input
        readOnly
        placeholder={`请填写${data.labelName}`}
        value={props?.value ? JSON.stringify(props.value) : ''}
        addonAfter={<SettingOutlined onClick={onOpen} />}
      />
      {visible && (
        <NodeArrayTable
          title={data?.labelName + '设置'}
          onClose={onClose}
          tableData={data?.complexList}
          onFormChange={onFormChange}
          defaultValue={props?.value}
        />
      )}
    </>
  );
};
